automatically perform swap estimation on user input #1920
Conversation
🦋 Changeset detectedLatest commit: 5f052f1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| <div className='relative flex items-center justify-between'> | ||
| <ValueViewComponent view={input} size='sm' /> | ||
| <div className='absolute left-1/2 -translate-x-1/2 flex items-center'> | ||
| <ArrowRight size={20} strokeWidth={2.5} className='text-white' /> |
There was a problem hiding this comment.
suggestion: thoughts about replacing the up and down arrows with a single right arrow? the up and down arrows had alignment issues as the routes expanded
before
after
| if (!disabled && amount && parseFloat(amount) > 0) { | ||
| // Prevents re-triggering the swap simulation if it's already computed | ||
| if (!result) { | ||
| void simulateSwap(); |
There was a problem hiding this comment.
comment: we can optionally wrap this in a framer motion div for smoother rendering
| <div className='flex w-full justify-between gap-8'> | ||
| {trace.value.map((value, index) => ( | ||
| <div key={index} className='flex shrink-0 flex-col gap-1'> | ||
| <div | ||
| key={index} | ||
| className='flex min-w-[60px] max-w-[150px] shrink-0 grow basis-auto flex-col items-center gap-1' | ||
| > |
There was a problem hiding this comment.
tightening pill to dynamically shrink and fit within the available space
before
after
| const { simulateSwap, resetSimulateSwap, disabled, result, amount } = | ||
| useStoreShallow(simulateSwapSelector); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
Not critical to fix, but in the future, we should always see if it's possible to use react-query first (versus useEffect()) for all async tasks. The complexities of loading/error/cache invalidation is abstracted away.
There was a problem hiding this comment.
totally, forgot about using react-query here – that's an easy refactor
references #1919
Screen.Recording.2024-11-21.at.8.16.48.PM.mov